<script>
import { ElMessage } from 'element-plus';


import { datalist } from '@/api/yxd'
export default {
  data() {
    return {
      list: [],
      img:'',
      fits: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',

      ],
    
    }
     
   
  }, 
  mounted() {
    this.list=[
      localStorage.getItem('names'),
      localStorage.getItem('ddtime'),
      localStorage.getItem('img'),
      localStorage.getItem('str'),
      localStorage.getItem('headSculpture'),
    ]

       console.log(localStorage);

    // this.img=this.list[2]
    // console.log(this.list[2]);
    // datalist().then(res => {
    //   console.log(res);
    //   this.list = res
    //   // console.log(res.data[1]);
    // })
  } 
}



</script>

<template>


<div v-if="list[0]!==null" >
        <div class="text"> <el-avatar :size="50" 
      :src= "list[4]"  />

    <el-text  class="mx-1" size="large">{{ list[0] }}</el-text>
    <el-text class="mx-1" size="large">{{ list[1] }}</el-text>
    <el-text class="mx-1" size="large">{{ list[3] }}</el-text>
  </div>
  <div class="demo-image">
    <div  class="nice">
      <span class="demonstration">{{ list[5]  }}</span>
      <el-image  style="width: 320px; height: 280px" :src="this.list[2]"
        :initial-index="4" :zoom-rate="1.2" />
        
    </div>
  </div></div>



<div style="float: left;">
  <div class="text"><el-avatar :size="50"
      src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F16%2F20210116225104_9d860.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1681563227&t=a51e7ec40617d5e5bf64fad909d04ad7" />

    <el-text class="mx-1" size="large">杨老师</el-text>
    <el-text class="mx-1" size="large">2022-01-20 14:00</el-text>
    <el-text class="mx-1" size="large">开心的班会</el-text>
  </div>
  <div class="demo-image">
    <div v-for="fit in fits" :key="fit" class="block">
      <!-- <span class="demonstration">{{ fit }}</span> -->
      <el-image style="width: 320px; height: 280px" :src="fit" :preview-src-list="fits" :initial-index="4"
        :zoom-rate="1.2" />
    </div>
  </div></div>


  



</template>

  
<style lang="scss" scoped>
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.text {
  display: flex;
  padding-top: 50px;

  .el-text {
    color: black;
    margin-left: 35px;

  }

}

.demo-image .block {
  padding: 30px 10px 10px 20px;
  text-align: center;
  /* border-right: solid 1px var(--el-border-color); */
  display: inline-block;
  width: 30%;
  box-sizing: border-box;
  /* vertical-align: top; */
}

.demo-image .block:last-child {
  border-right: none;
}

/* .demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
} */
.nice .el-image {
  float: left;
  padding: 30px 10px 10px 20px;

}</style>